<template>
		<el-col :span="7">
			<el-form-item label="链接类型">
				<el-select v-model="showTypeId" placeholder="请选择" @change="typeIdChange">
					<el-option
						v-for="item in options"
						:key="item.value"
						:label="item.label"
						:value="item.value"
					/>
				</el-select>
			</el-form-item>
		</el-col>
		<el-col :span="linkSpan">
			<el-form-item label="请选择" v-show="showTypeId == 9998">
				<el-cascader
					v-model="showLink"
					:options="sysOptions"
					:props="{
						value: 'value',
						label: 'label',
						children: 'children',
						emitPath: false,
						checkStrictly: false
					}"
				/>
			</el-form-item>
			<el-form-item label="链接" v-show="showTypeId != 9998">
				<el-input v-model="showLink" :placeholder="inputPlaceholder" />
				<el-tooltip placement="top">
					<template #content> 不填写链接则不跳转 </template>
					<i class="el-icon-warning-outline"></i>
				</el-tooltip>
			</el-form-item>
		</el-col>
</template>

<script>
export default {
	name: "form-diy-link-select",
	components: {},
	props: {
		type_id: {
			type: String
		},
		link: {
			type: String
		},
		linkSpan: { type: Number, default: 18 }
	},
	emits: ["update:type_id", "update:link"],
	data() {
		return {
			options: [
				{
					value: "1",
					label: "商品详情"
				},
				{
					value: "2",
					label: "商品分类列表"
				},
				{
					value: "3",
					label: "文章详情"
				},
				{
					value: "4",
					label: "文章分类列表"
				},
				{
					value: "9998",
					label: "系统功能"
				},
				{
					value: "9999",
					label: "外链"
				}
			],
			sysOptions: [
				{
					value: "bottom",
					label: "底部按钮",
					children: [
						{ value: "bottom-home", label: "首页" },
						{ value: "bottom-classify", label: "分类" },
						{ value: "bottom-cart", label: "购物车" },
						{ value: "bottom-my", label: "我的" }
					]
				},
				{
					value: "my-order",
					label: "我的订单",
					children: [
						{ value: "my-order-0", label: "全部订单" },
						{ value: "my-order-1", label: "待付款" },
						{ value: "my-order-2", label: "待发货" },
						{ value: "my-order-3", label: "待收货" },
						{ value: "my-order-4", label: "待评价" },
						{ value: "my-order-5", label: "售后列表" }
					]
				},
			]
		};
	},
	computed: {
		inputPlaceholder() {
			if (this.type_id == "") {
				return "请选择链接类型";
			}
			if (this.type_id == "9999") {
				return "请输入外链";
			} else {
				return "请输入" + this.getOptionsOne(this.type_id).label + "ID";
			}
		},
		showTypeId: {
			get() {
				return this.type_id;
			},
			set(val) {
				this.$emit("update:type_id", val);
			}
		},
		showLink: {
			get() {
				return this.link;
			},
			set(val) {
				this.$emit("update:link", val);
			}
		}
	},
	mounted() {},
	methods: {
		typeIdChange(_val) {
			console.log(_val);
			// 变更后，清空内容
			this.showLink = "";
		},
		getOptionsOne(_val) {
			const tmp = this.options.filter((item) => {
				return item.value == _val;
			});
			if (tmp.length > 0) {
				return tmp[0];
			} else {
				return {
					value: "-1",
					label: "未知"
				};
			}
		}
	}
};
</script>
